<!--应聘简历-->
<template>
  <div>
    <div class="tips-line-list">
      <div class="tips-line-list-l">
        <p><span>{{ checkCount ? checkCount.count : 0 }}</span>人</p>
        <p>学生总数</p>
      </div>
      <div class="tips-line-list-l" :class="checkTab_text=='get'?'active_checkWork':''" @click="checkTabFn('get')">
        <p><span>{{ checkCount ? checkCount.sign : 0 }}</span>人</p>
        <p>今日学生出勤数</p>
      </div>
      <div class="tips-line-list-l" :class="checkTab_text=='leave'?'active_checkWork':''" @click="checkTabFn('leave')">
        <p><span>{{ checkCount ? checkCount.absent : 0 }}</span>人</p>
        <p>今日学生未出勤数</p>
      </div>
      <div class="tips-line-list-l">
        <p><span>{{ checkCount ? checkCount.attendance_student : 0 }}</span>%</p>
        <p>今日学生出勤率</p>
      </div>
    </div>
    <div class="tips-line-list">
      <div class="tips-line-list-l">
        <p><span>{{ checkCount ? checkCount.user_count : 0 }}</span>人</p>
        <p>教职工总数</p>
      </div>
      <div class="tips-line-list-l" :class="checkTab_text=='get_teacher'?'active_checkWork':''"
           @click="checkTabFn('get_teacher')">
        <p><span>{{ checkCount ? checkCount.user : 0 }}</span>人</p>
        <p>今日职工出勤数</p>
      </div>
      <div class="tips-line-list-l" :class="checkTab_text=='leave_teacher'?'active_checkWork':''"
           @click="checkTabFn('leave_teacher')">
        <p><span>{{ checkCount ? checkCount.user_count - checkCount.user : 0 }}</span>人</p>
        <p>今日职工未出勤数</p>
      </div>
      <div class="tips-line-list-l">
        <p><span>{{ checkCount ? checkCount.attendance_tearch : 0 }}</span>%</p>
        <p>今日职工出勤率</p>
      </div>
    </div>
    <div class="hearder-search" v-if="checkTab_text=='get' || checkTab_text=='get_teacher' || checkTab_text == 'leave'">
      <div class="breadcrumb-container">
        <div v-if="checkTab_text=='get' || checkTab_text == 'leave'">
          <component
              v-bind:is="item.propertyType"
              :property.sync="item"
              v-for="(item, index) in getPower"
              :key="index"
              @updateVal="updateVal"
          ></component>
        </div>
        <el-input v-model="searchForm.student_name" :placeholder="checkTab_text=='get'?'学生姓名':'职工姓名'" size="small"
                  class="w-140 mr-10" v-if="checkTab_text !== 'leave'"></el-input>
        <el-date-picker
            v-model="addtime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            v-if="checkTab_text !== 'leave'"
            :picker-options="pickerOptions1"
            @change="timeChange">
        </el-date-picker>
        <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i class="el-icon-search"></i>搜索
        </el-button>
        <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
        <!--        <el-button size="small" class="ml-10" v-if="!searchForm.start_time" disabled>导出考勤记录</el-button>-->
        <div class="ml-10">
          <downexcel type="signCheck" :option="downStudent" v-if="checkTab_text=='get'"></downexcel>
          <downexcel type="leaveSignCheck" v-if="checkTab_text=='leave'" :option="{class_id: searchForm.class_id,
        section_id: searchForm.section_id}"></downexcel>
          <downexcel type="signCheckTeacher" :option="search_teacher_Form"
                     v-if="checkTab_text=='get_teacher'"></downexcel>
        </div>
        <span class="ml-10">默认展示当天记录</span>
      </div>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :border="tableoption.tableBorder"
            tooltip-effect="dark">
          <el-table-column
              label="学生头像"
              align="center"
              prop="name"
              :key="1"
              v-if="checkTab_text=='get' || checkTab_text=='leave'">
            <template slot-scope="scope">
              <ImagePreview :src="scope.row.student.pic" width="40px" height="40px" v-if="checkTab_text=='get'"></ImagePreview>
              <ImagePreview :src="scope.row.pic" width="40px"  height="40px"v-if="checkTab_text=='leave'"></ImagePreview>
<!--              <viewerModle type="1" :imgSrc="scope.row.student.pic" v-if="checkTab_text=='get'"></viewerModle>-->
<!--              <viewerModle type="1" :imgSrc="scope.row.pic" v-if="checkTab_text=='leave'"></viewerModle>-->
            </template>
          </el-table-column>
          <el-table-column
              label="学生姓名"
              align="center"
              prop="name"
              :key="2"
              v-if="checkTab_text=='get' || checkTab_text=='leave'">
            <template slot-scope="scope">
              <span v-if="checkTab_text=='get'">{{ scope.row.student ? scope.row.student.name : '--' }}</span>
              <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="学生班级"
              align="center"
              prop="name"
              :key="3"
              v-if="checkTab_text=='get' || checkTab_text=='leave'">
            <template slot-scope="scope">
              {{ scope.row.classes ? scope.row.classes.class_name : '--' }}
            </template>
          </el-table-column>
          <el-table-column
              label="教职工头像"
              align="center"
              prop="name"
              :key="4"
              v-if="checkTab_text=='get_teacher' || checkTab_text=='leave_teacher'">
            <template slot-scope="scope">
              <ImagePreview :src="scope.row.user.pic" width="40px" height="40px" v-if="checkTab_text=='get_teacher'"></ImagePreview>
              <ImagePreview :src="scope.row.pic" width="40px" height="40px" v-else></ImagePreview>
<!--              <viewerModle type="1" :imgSrc="scope.row.user.pic" v-if="checkTab_text=='get_teacher'"></viewerModle>-->
<!--              <viewerModle type="1" :imgSrc="scope.row.pic" v-else></viewerModle>-->
              <!--              <viewerModle type="1" :imgSrc="scope.row.pic" v-if="checkTab_text=='leave'"></viewerModle>-->
            </template>
          </el-table-column>
          <el-table-column
              label="教职工姓名"
              align="center"
              prop="name"
              :key="5"
              v-if="checkTab_text=='get_teacher' || checkTab_text=='leave_teacher'">
            <template slot-scope="scope">
              <span v-if="checkTab_text=='get_teacher'">{{
                  scope.row.user.realname ? scope.row.user.realname : '--'
                }}</span>
              <span v-else>{{ scope.row.realname }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="角色"
              align="center"
              prop="name"
              :key="6"
              v-if="checkTab_text=='get_teacher' || checkTab_text=='leave_teacher'">
            <template slot-scope="scope">
              <span v-if="checkTab_text=='get_teacher'">{{
                  scope.row.user.role ? scope.row.user.role.name : '--'
                }}</span>
              <span v-else>{{ scope.row.role ? scope.row.role.name : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="出勤情况"
              align="center"
              prop="use_time"
              :key="7">
            <template slot-scope="scope">
              <span v-if="checkTab_text=='get'||checkTab_text=='get_teacher'">
                <el-tag>
                已出勤
                </el-tag>
              </span>
              <span v-else>
                <el-tag type="danger" v-if="checkTab_text=='leave_teacher'">
                  {{scope.row.leave?scope.row.leave:'未出勤'}}
                </el-tag>
                <el-tag type="danger" v-if="checkTab_text=='leave' && !scope.row.growth">
                  未出勤
                </el-tag>
                <el-tag type="success" v-if="checkTab_text=='leave' && scope.row.growth">
                  <span>
                    {{studentState[scope.row.growth]}}
                  </span>
                </el-tag>
              </span>
            </template>
          </el-table-column>
          <el-table-column
              label="今日体温"
              align="center"
              prop="temperature"
              :key="8"
              v-if="checkTab_text=='get' || checkTab_text=='get_teacher'">
          </el-table-column>
          <el-table-column
              label="出勤备注"
              align="center"
              prop="use_time"
              :key="9"
              v-if="checkTab_text=='leave'">
            <template slot-scope="scope">
              <div v-if="scope.row.remark">{{ scope.row.remark }}</div>
              <el-button v-else type="primary" size="mini" plain @click="studentId=scope.row.id,remarkVisible=true">添加备注
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
              label="出勤时间"
              align="center"
              prop="create_time"
              :key="10"
              v-if="checkTab_text=='get'">
            <template slot-scope="scope">
              <el-link :type="!scope.row.getTimeStatus?'danger':''">{{ scope.row.create_time }}</el-link>
            </template>
          </el-table-column>
          <el-table-column
              label="当日刷脸记录"
              align="center"
              prop="create_time"
              :key="11"
              v-if="checkTab_text=='get_teacher'">
            <template slot-scope="scope">
              <el-tag type="" effect="plain" v-for="item in scope.row.log" :key="item.id">{{
                  item.create_time
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              label="缺勤时间"
              align="center"
              prop="create_time"
              :key="12"
              v-if="checkTab_text=='leave' || checkTab_text=='leave_teacher'">
            <template>
              {{ toDayLine }}
            </template>
          </el-table-column>
          <el-table-column
              label="接送详情"
              align="center"
              :key="13"
              v-if="checkTab_text=='get'">
            <template slot-scope="scope">
              <p v-if="scope.row.pick" class="pick-user-line">
                <span>接送时间：{{ scope.row.out_time }}</span>
                <span>接送人：{{ scope.row.pick.relation }}</span>
              </p>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          background
          :page-size="page.pagesize"
          :current-page="page.pageindex"
          layout="total, prev, pager, next"
          :total="page.total"
          @current-change="handleSizeChange"></el-pagination>
    </el-col>
    <addClassRemark :visible.sync="remarkVisible" :studentId="studentId" @getNewIndex="getNewIndex"></addClassRemark>
  </div>
</template>

<script>
import {pagination, tableoption, yeartime} from '@/utils/util.js'
import addClassRemark from "./addClassRemark";

export default {
  components: {
    addClassRemark
  },
  props: ['tabStatus'],
  data() {
    return {
      remarkVisible: false,
      addtime: [],
      pickerOptions1: {
        disabledDate(time) {
          // return time.getTime() > Date.now() - 8.64e7 // 不包括今天
          return time.getTime() > Date.now()
        }
      },
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      searchForm: {
        start_time: '',
        end_time: '',
        student_name: '',
        class_id: '',
        section_id: ''
      },
      downStudent: {},
      search_teacher_Form: {
        start_time: '',
        end_time: '',
        realname: '',
      },
      checkTab_text: 'get',
      checkCount: '',
      toDayLine: '',
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      studentState: {
        0: '未出勤', // 未到
        1: '已签到', // 已到
        2: '病假',
        3: '事假',
        4: '病假代签',
        5: '事假代签',
        6: '早退代签',
        7: '晨检病假'
      },
      studentId: 0
    }
  },
  created() {
    console.log('tabStatus', this.tabStatus)
    this.countNumber()
    this.InitFn()
    this.toDayLine = this.yearDayLine(new Date())
  },
  methods: {
    // 初始化
    async InitFn() {
      console.log('this.checkTab_text:', this.checkTab_text)
      let option = {};
      if (this.checkTab_text === 'get') {
        option = {
          start_time: this.searchForm.start_time,
          end_time: this.searchForm.end_time,
          student_name: this.searchForm.student_name,
          class_id: this.searchForm.class_id,
          section_id: this.searchForm.section_id
        }
        this.downStudent = this.getJson(option)
      }
      if (this.checkTab_text === 'get_teacher') {
        option = {
          start_time: this.searchForm.start_time,
          end_time: this.searchForm.end_time,
          realname: this.searchForm.student_name,
        }
        this.search_teacher_Form = this.getJson(option)
      }
      option.p = this.page.pageindex;
      let data = await this.$fetch(this.checkTab_text === 'get' ? this.api.classActive.check_work.index : this.api.classActive.check_work_teacher.index, option);
      console.log('data:', data)
      if (this.checkTab_text === 'get') {
        console.log('today:', this.toDayLine)
        for (let item of data.list.data) {
          let curDate = new Date(item.create_time),
              endDate = new Date(this.toDayLine + ' 08:00');
          if (curDate <= endDate) {
            // console.log('时间之前',item.create_time)
            item.getTimeStatus = true
          } else {
            // console.log('超时了',item.create_time)
            item.getTimeStatus = false
          }
        }
      }
      this.arryList = data.list.data
      this.page.total = data.list.total
    },
    // 今日缺勤
    async leaveInitFn() {
      let data = await this.$fetch(this.checkTab_text === 'leave' ? this.api.classActive.check_work.leave_today : this.api.classActive.check_work_teacher.leave_today, {
        p: this.page.pageindex,
        section_id: this.searchForm.section_id,
        class_id: this.searchForm.class_id
      });
      console.log('data:', data)
      this.arryList = data.list.data
      this.page.total = data.list.total
    },
    async countNumber() {
      // console.log('option:', option)
      let data = await this.$fetch(this.api.classActive.check_work.count, {});
      data.detail.attendance_student = (((data.detail.sign / data.detail.count).toFixed(2)) * 100).toFixed(2)
      let count_ = 0
      if (data.detail.user && data.detail.user_count) {
        count_ = ((data.detail.user / data.detail.user_count).toFixed(2)) * 100
      }
      data.detail.attendance_tearch = count_.toFixed(2)
      this.checkCount = data.detail;
      console.log('data:', data)
    },
    getNewIndex() {
      this.leaveInitFn();
    },
    checkTabFn(option) {
      console.log('option:', option)
      // 学生
      if (option === 'get' && this.checkTab_text !== 'get') {
        this.checkTab_text = option;
        this.searchForm.class_id = ''
        this.searchForm.section_id = ''
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower
        this.page.pageindex = 1;
        this.page.total = 0;
        this.arryList = [];
        this.InitFn();
      }
      if (option === 'leave' && this.checkTab_text !== 'leave') {
        this.checkTab_text = option
        this.searchForm.class_id = ''
        this.searchForm.section_id = ''
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower
        this.page.pageindex = 1;
        this.page.total = 0;
        this.arryList = [];
        this.leaveInitFn();
      }
      // 教职工
      if (option === 'get_teacher' && this.checkTab_text !== 'get_teacher') {
        this.checkTab_text = option
        this.page.pageindex = 1;
        this.page.total = 0;
        this.arryList = [];
        this.InitFn();
      }
      if (option === 'leave_teacher' && this.checkTab_text !== 'leave_teacher') {
        this.checkTab_text = option
        this.page.pageindex = 1;
        this.page.total = 0;
        this.arryList = [];
        this.leaveInitFn();
      }
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    cateListFn() {
      this.$fetch(this.api.cate_list, {
        p: 1
      }).then((response) => {
        if (response.code === 0) {
          for (let i in response.list.data) {
            this.tableList.push(response.list.data[i])
          }
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      if (this.checkTab_text === 'get' || this.checkTab_text === 'get_teacher') {
        this.InitFn()
      }
      if (this.checkTab_text === 'leave' || this.checkTab_text === 'leave_teacher') {
        this.leaveInitFn()
      }
    },
    handleSelectionChange(val) {
      console.log(val) // 所有选中值
      this.handleSelection = val
    },
    searchFn(option) {
      if (option === 'refresh') {
        this.addtime = []
        this.searchForm.start_time = ''
        this.searchForm.end_time = ''
        this.searchForm.student_name = ''
        this.searchForm.class_id = ''
        this.searchForm.section_id = ''
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower
      } else {
        if (this.addtime) {
          if (this.addtime.length) {
            this.searchForm.start_time = this.addtime[0];
            this.searchForm.end_time = this.addtime[1];
          } else {
            this.searchForm.start_time = '';
            this.searchForm.end_time = '';
          }
        } else {
          this.searchForm.start_time = '';
          this.searchForm.end_time = '';
        }

      }
      this.page.pageindex = 1;
      if (this.checkTab_text !== 'leave') {
        this.InitFn()
      } else {
        this.leaveInitFn()
      }
    },
    // 当前时间
    yearDayLine(date) {
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      month = month < 10 ? ('0' + month) : month
      day = day < 10 ? ('0' + day) : day

      return year + '-' + month + '-' + day
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
    timeChange() {
      if (this.addtime) {
        this.searchForm.start_time = this.addtime[0];
        this.searchForm.end_time = this.addtime[1];
      }
    }
  },
  mounted() {
  }
}
</script>
<style>
.tips-line-list {
  display: flex;
  margin-bottom: 10px;
}

.tips-line-list-l {
  flex: 1;
  border: 1px solid #1b8de5;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  border-radius: 5px;
  padding: 10px 0;
  color: #333;
  background: rgba(232, 249, 255, 0.3);
  cursor: pointer;
}

.tips-line-list-l:last-child {
  margin-right: 0;
}

.tips-line-list-l:nth-child(2):hover, .tips-line-list-l:nth-child(3):hover {
  box-shadow: 0 0 4px #1b8de5;
}

.tips-line-list-l span {
  font-weight: bold;
  color: #0085ff;
  font-size: 22px;
  margin-right: 5px;
}

.tips-line-list-l p:last-child {
  color: #777;
  margin-top: 5px;
}

.active_checkWork {
  background: #ffe9da;
  box-shadow: 0 0 4px #ffc990;
}

.pick-user-line {
  display: flex;
  flex-direction: column;
}
</style>
